<template>
  <div class="g-bd">
    <div class="u-wrap">
      <!-- 侧边区域 -->
      <div class="u-aside">
        <template v-if="specialList">
          <h2 class="special">云音乐特色榜</h2>
          <ul>
            <li
              v-for="(item, i) in specialList"
              :key="item.id"
              class="mine"
              :class="i == 0 ? 'current' : ''"
              :data-id="item.id"
              :data-update="item.updateFrequency"
              @click="bilistClickHander($event)"
              ref="listRef"
            >
              <div class="left">
                <a
                  :href="'/discover/toplist?id=' + item.id"
                  class="avatar"
                  @click.prevent="$router.push('/discover/toplist?id=' + item.id)"
                  ><img :src="item.coverImgUrl + '?param=40y40'" alt=""
                /></a>
              </div>
              <p class="name">
                <a
                  :href="'/discover/toplist?id=' + item.id"
                  @click.prevent="$router.push('/discover/toplist?id=' + item.id)"
                  >{{ item.name }}</a
                >
              </p>
              <p class="update">{{ item.updateFrequency }}</p>
            </li>
          </ul>
        </template>
        <template v-if="specialList">
          <h2 class="global">全球媒体榜</h2>
          <ul>
            <li
              v-for="item in globalList"
              :key="item.id"
              class="mine"
              :data-id="item.id"
              :data-update="item.updateFrequency"
              @click="bilistClickHander($event)"
              ref="listRef"
            >
              <div class="left">
                <a
                  :href="'/discover/toplist?id=' + item.id"
                  class="avatar"
                  @click.prevent="$router.push('/discover/toplist?id=' + item.id)"
                  ><img :src="item.coverImgUrl + '?param=40y40'" alt=""
                /></a>
              </div>
              <p class="name">
                <a
                  :href="'/discover/toplist?id=' + item.id"
                  class="f-thide"
                  :title="item.name"
                  @click.prevent="$router.push('/discover/toplist?id=' + item.id)"
                  >{{ item.name }}</a
                >
              </p>
              <p class="update">{{ item.updateFrequency }}</p>
            </li>
          </ul>
        </template>
      </div>
      <!-- 主体区域 -->
      <div class="u-main" v-if="topList.name">
        <!-- 主体头部 -->
        <div class="tm-head">
          <div class="tmh-cover">
            <img :src="topList.coverImgUrl" alt="" />
            <div class="msk"></div>
          </div>
          <div class="tmh-info">
            <h2>{{ topList.name }}</h2>
            <div class="tmhi-uptime">
              <i class="u-icn icon-time"></i>
              <span class="upate-time">最近更新：{{ dateFormat }} </span>
              <span class="u-frequency">({{ topList.updateFrequency }})</span>
            </div>
            <div class="tmhi-btn">
              <a
                href="javascript:void(0);"
                class="play u-btn2"
                title="播放"
                @click="playTopList(topList)"
                ><i><em class="icon-play u-btn2"></em>播放</i></a
              >
              <a
                href="javascript:void(0);"
                class="add u-btn2"
                title="添加到播放列表"
                @click="addToPlayList(topList)"
              ></a>
              <a href="javascript:void(0);" class="subscribed-count u-btn2" @click="operationClick"
                ><i>({{ topList.subscribedCount }})</i></a
              >
              <a href="javascript:void(0);" class="share-count u-btn2" @click="operationClick"
                ><i>({{ topList.shareCount }})</i></a
              >
              <a href="javascript:void(0);" class="download u-btn2" @click="operationClick"
                ><i>下载</i></a
              >
              <a href="javascript:void(0);" class="comment-count u-btn2" @click="operationClick"
                ><i>({{ topList.commentCount }})</i></a
              >
            </div>
          </div>
        </div>
        <!-- 榜单列表 -->
        <div class="tm-list">
          <!-- 榜单标题 -->
          <div class="tml-title">
            <h3>歌曲列表</h3>
            <span class="sub">
              <!-- <span>100</span
              >首歌</span> -->
              <span>{{ topList.trackCount }}</span
              >首歌</span
            >
            <div class="play-count">
              播放：<strong>{{ topList.playCount }}</strong
              >次
            </div>
          </div>
          <!-- 歌曲列表 -->
          <div class="tml-song-list">
            <div class="tmls-wrap">
              <!-- 歌曲表格 -->
              <MyTable :list="topList.tracks" :isImage="true">
                <template #playIcon="slotProps">
                  <a
                    href="javascript:;"
                    class="u-table cover"
                    :class="slotProps.row.id === currentSongId ? 'z-sel' : ''"
                    @click="playSong(slotProps.row)"
                    ><img src="" alt=""
                  /></a>
                </template>
              </MyTable>
            </div>
          </div>
          <!-- 评论组件 -->
          <Comment :id="topList.id" :type="2"></Comment>
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <!-- <GoTop link="#"></GoTop> -->
  </div>
</template>

<script>
import Comment from '@/components/Comment/Comment.vue'
import MyTable from '@/components/Table/Table.vue'
import { playList, allToplist } from '@/api/playlist.js'
import { operationClick } from '@/utils/methods.js'
export default {
  components: { Comment, MyTable },
  data() {
    return {
      // 当前榜单数据
      // /playlist/detail?id=19723756
      topList: { coverImgUrl: '', tracks: [{ name: '', alia: [''] }] },
      // 特色榜单
      specialList: null,
      // 全球榜单
      globalList: null,
      // 所有的榜单 /toplist
      allTopList: null
    }
  },
  methods: {
    operationClick,
    // 获取当前榜单数据
    async getTopList(id, updateFrequency) {
      const { data: res } = await playList(id)
      this.topList = res.playlist
      this.topList.updateFrequency = updateFrequency
      this.topList.coverImgUrl += '?param=150y150'
      // 处理榜单数据
      let artisName = []
      this.topList.tracks.forEach(item => {
        item.ar.forEach(artis => {
          artisName.push(artis.name)
        })
        item.arname = artisName.join('/')
        artisName = []
      })
    },
    // 获取所有榜单信息
    async getAllTopList() {
      const { data: res } = await allToplist()
      this.allTopList = res.list
      // const url = '/playlist/detail?id=' + this.allTopList[0].id
      this.getTopList(this.allTopList[0].id, this.allTopList[0].updateFrequency)
      this.specialList = this.allTopList.slice(0, 4)
      this.globalList = this.allTopList.slice(4, this.allTopList.length)
    },
    // 点击切换榜单
    bilistClickHander(e) {
      const id = e.currentTarget.dataset.id
      const update = e.currentTarget.dataset.update
      // 进行跳转获取数据
      this.$router.push('/discover/toplist?id=' + id)
      this.getTopList(id, update)
      // 改变current样式
      this.$refs.listRef.forEach(li => {
        li.classList.remove('current')
      })
      e.currentTarget.classList.add('current')
    },
    // 将播放列表替换为榜单列表
    playTopList(toplist) {
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', toplist.tracks)
    },
    // 添加到播放列表
    addToPlayList(toplist) {
      // this.$store.commit('Music/isPlayFalse')
      this.$store.commit('Music/pushSongList', toplist.tracks)
    },
    playSong(item) {
      console.log(item)
      this.$store.commit('Music/pushSongList', item)
      this.$store.commit('Music/setplayerSettingIndex', this.$store.state.Music.songList.length - 1)
    }
  },
  computed: {
    // 处理更新日期格式
    dateFormat() {
      const updateTime = new Date(this.topList.updateTime)
      let m = updateTime.getMonth() + 1
      let d = updateTime.getDate()
      m = m.toString().padStart(2, '0')
      d = d.toString().padStart(2, '0')
      return m + '月' + d + '日'
    },
    // 当前歌曲id
    currentSongId() {
      const id = this.$store.state.Music.currentSong.id
        ? this.$store.state.Music.currentSong.id
        : undefined
      return id
    }
  },
  created() {
    // // 获取当前榜单数据
    // this.getTopList()
    // 获取所有榜单信息
    this.getAllTopList()
  }
}
</script>

<style lang="less" scoped>
@import './TopList.less';
</style>
